<!-- 
 @author chenjw
 2019.10.28 add into this directory
 -->
<template>
	<!-- start view -->
	<view >
		<!-- 顶部 -->
		<!-- <view class="bg-white top">
			<view class="flxeRow">
				<text class="lg text-grey cuIcon-back icon_b" ></text>
				<text class="text">开店申请</text>
				
				
			</view>
		</view> -->
		<!-- 测试按钮，要去除 -->
		<button class="cu-btn text_a"  @tap="textBtn()">textBtn</button>
		<!-- 提交申请页面 -->
		<view id="submission" v-if="status==0">
			
			<!-- 中部 -->
			<view class="bg-white mid">
				<!-- 图标 -->
				<view class="icon_t">
					<text  class="text-blue cuIcon-roundcheckfill" ></text>
				</view>
				<!-- 流程提示 -->
				<view class="text_disc">
					<text  class="text_a" >您的开店申请已成功提交</text>
				</view>
				<!-- 分割线 -->
				<hr class="hr_style">
				<!-- 详情描述 -->
				<view id="text_disc_detail" class="text_disc_detail_group"  >
					<view >
						<text class="text_disc_detail">• 我们将在3个工作日内（不含国家法定假日）完成审核并以短信或者邮件的方式通知您；</text>
					</view>
					<view >
						<text class="text_disc_detail">• 您也可以登陆 我的店铺 及时查看审核进度；</text>
					</view>
					<view >
						<text class="text_disc_detail">• 如有疑问请联系客服咨询。</text>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="btn_two">
					<button class=" shopbtn text_a">撤销申请</button>
					<button class=" shopbtn text_a" style="background-color: #007AFF;">返回商城</button>
				</view>
			</view>
		</view>
		<!-- 审核页面 -->
		<view id="examine" v-if="status==1">
			<!-- 中部 -->
			<view class="bg-white mid">
				<!-- 图标 -->
				<view class="icon_t">
					<text  class="text-blue cuIcon-timefill" ></text>
				</view>
				<!-- 流程提示 -->
				<view class="text_disc">
					<text  class="text_a" >信息正在审核中，请耐心等候···</text>
				</view>
				<!-- 分割线 -->
				<hr class="hr_style">
				<!-- 详情描述 -->
				<view id="text_disc_detail" class="text_disc_detail_group"  >
					<view >
						<text class="text_disc_detail">• 如有疑问请联系客服咨询。</text>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<!-- 步骤条start -->
				<view class="bg-white padding">
					<view class="text_titile2">入驻进度</view>
					<view class="cu-steps">
						<view class="cu-item" :class="index>status+1?'':'text-blue'" v-for="(item,index) in stepList" :key="index">
							<text class="num" :class="status==2?'err text-red':''" ></text> {{item.name}}
						</view>
					</view>
				</view>
				<!-- 步骤条end -->
				<view class="btn_two">
					<button class=" shopbtn text_a">撤销申请</button>
					<button class=" shopbtn text_a" style="background-color: #007AFF;">返回首页</button>
				</view>
			</view>
		</view>
	
		<!-- 审核失败页面 -->
		<view id="examineFail" v-if="status==2">
			<!-- 中部 -->
			<view class="bg-white mid">
				<!-- 图标 -->
				<view class="icon_t">
					<text  class="text-red cuIcon-infofill" ></text>
				</view>
				<!-- 流程提示 -->
				<view class="text_disc">
					<text  class="text_a" >抱歉，您的申请审核不通过！</text>
				</view>
				<!-- 分割线 -->
				<hr class="hr_style">
				<!-- 详情描述 -->
				<view id="text_disc_detail" class="text_disc_detail_group"  >
					<view >
						<text class="text_disc_detail">• 如有疑问请联系客服咨询。</text>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<!-- 步骤条start -->
				<view class="bg-white padding">
					<view class="text_titile2">入驻进度</view>
					<view class="cu-steps">
						<view class="cu-item" :class="index>status?'':'text-blue'" v-for="(item,index) in stepList" :key="index">
							<text class="num" :class="index >= 2 ?'err text-red':''" ></text> <text :class="index == 2 ?'text-red':''" >{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- 步骤条end -->
				<view class="btn_two">
					<button class=" shopbtn text_a">撤销申请</button>
					<button class=" shopbtn text_a" style="background-color: #007AFF;">重新申请</button>
				</view>
			</view>
		</view>
		
		<!-- 审核成功页面 -->
		<view id="examineSucc" v-if="status==3">
			<!-- 中部 -->
			<view class="bg-white mid">
				<!-- 图标 -->
				<view class="icon_t">
					<text  class="text-green cuIcon-roundcheckfill" ></text>
				</view>
				<!-- 流程提示 -->
				<view class="text_disc">
					<text  class="text_a" >恭喜您，店铺创建成功！</text>
				</view>
				<!-- 分割线 -->
				<hr class="hr_style">
				<!-- 详情描述 -->
				<view id="text_disc_detail" class="text_disc_detail_group"  >
					<view >
						<text class="text_disc_detail">• 现在您可以回到商家我的店铺首页去经营您的店铺啦，赶紧去录入商品吧；</text>
					</view>
					<view >
						<text class="text_disc_detail">• 如有疑问请联系客服咨询。</text>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<!-- 步骤条start -->
				<view class="bg-white padding">
					<view class="text_titile2">入驻进度</view>
					<view class="cu-steps">
						<view class="cu-item" :class="index>status+1?'':'text-blue'" v-for="(item,index) in stepList" :key="index">
							<text class="num" :class="index == 4 ?'err text-red':''" ></text>{{item.name}}
						</view>
					</view>
				</view>
				<!-- 步骤条end -->
				<view class="btn_two">
					<button class="shopbtn text_a" style="background-color: #007AFF;">返回首页</button>
				</view>
			</view>
		</view>
	</view>
	<!-- end view -->	
			
		
</template>

<script>
	export default {
		data() {
			return {
				status: 0, //进度状态 从数据库获取
				stepList: [{
						name: '填写资料'
					}, {
						name: '提交申请'
					}, {
						name: '网站审核'
					}, {
						name: '创建成功'
					}, ],
					
					
			};
		},
		onLoad() {
	
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			// //测试按钮js
			textBtn(){
				if(this.status==3){
					this.status=0;
				}else{
					this.status++;
				}
				
			}

			
		}
	}
	
</script>

<style>
	
	@import '../../../common/shopApplication';
	
	
	/* 中部提示图标样式 */
	.icon_t {
		font-size: 180upx;
		margin: 0upx 284upx;
		padding-top: 86upx;
	}
	.shopbtn {
		border-radius: 40upx;
		height: 68upx;
		width: 244upx;
		border: 2upx rgba(124,124,124,1) solid;
		line-height:  68upx;
		
	}
	/* 详情提示字体 */
	.text_disc_detail  {
		font-size : 24upx;
		color : rgba(124,124,124,1);
	}
	/*分割线样式*/
	.hr_style {
		border: 0;/* 去掉其中一条边线 */
		height: 2upx;/* 粗细 */
		background-color : rgba(223,223,223,1);
		width: 96%;
		margin: 30upx auto;
	}
	.text_disc_detail_group{
		margin: 0 5%;
	}
	/*步骤条字体*/
	.text_titile2{
		text-align: center;
		font-weight: bold;
		padding-bottom: 30upx;
	
	}
	
</style>
